<template>
	<view class="page">
		<back-top v-if="showTop"></back-top>
		<view class="top-box">
			<view class="flex-between align-center classfy">
				<view @tap="openLevel">
					<text>全部</text>
					<text>{{ pickerText }}</text>
				</view>
				<navigator url="./search" hover-class="none">
					<text class="iconfont icon-search"></text>
				</navigator>
			</view>
			<view class="tabs flex-box">
				<view :class="{active: current == 0}" @click="change(0,1)">上架中({{count?count.on:'0'}})</view>
				<view :class="{active: current == 1}" @click="change(1,'')">告罄({{count?count.low:'0'}})</view>
				<view :class="{active: current == 2}" @click="change(2,0)">已下架({{count?count.off:'0'}})</view>
				<view class="tag" :style="{left: (2*current + 1)*16.75+'%'}"></view>
			</view>
		</view>
		<view class="list">
			<view class="item flex-box" v-for="(item,index) in list" :key='index' 
			      @click="toEditPage(item.goods_id)">
				<view class="goods-img">
					<image :src="item.img ? $imgUrls(item.img) : '/static/imageLoading.png'" mode="aspectFill"></image>
					<text v-if='item.type == 1'>特价</text>
					<text v-if='item.type == 2'>团购</text>
				</view>
				<view class="flex flex-between cloumn">
					<view>
						<view class="name lines2">{{ item.name }}</view>
						<view class="info lines">库存：<text>{{ item.stock }}</text></view>
					</view>
					<view class="flex-between">
						<view>
							<text class="myPrice">{{ item.price.slice(0,item.price.length-3) }}.</text>
							<text class="price-mini">{{ item.price.slice(item.price.length-2,item.price.length) }}</text>
						</view>
						<view class="flex-1 d-flex j-end ">
							<view class="up" @click.stop="EditIt(item.goods_id,index,'on')" v-if='current == 2'>上架</view>
							<view class="up" v-if='current == 1'>补货</view>
							<block v-if='current == 0'>
								<view class="up" @click.stop="EditIt(item.goods_id,index,'off')" >下架</view>
								<view class="up" @click.stop="toEditPage(item.goods_id)" >编辑</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="DiLine" v-if='showDiLine'>------- 我也是有底线的 -------</view>
		<empty type='1' v-if='noData' msg="没有相关的商品哦，换个分类试试吧"></empty>
		<my-picker ref="levelLinkage" v-if='classfy'
			:pickerValueDefault="pickerValueDefault" 
			:allData="classfy"
			@onConfirm="onConfirm" themeColor='#FF784A'></my-picker>
	</view>
</template>

<script>
	var that;
	import MyPicker from '../../components/my-picker/my-picker.nvue'
	export default {
		components:{
			'my-picker': MyPicker
		},
		data() {
			return {
				showTop: false,
				current: 0,
				classfy:'',
				pickerValueDefault: [0],
				pickerText: '',
				state: '1',
				limit: 10,
				page: 1,
				list: [],
				noData: false,
				more:true,
				showDiLine: false,
				classify_id: '',
				count:0
			}
		},
		onLoad() {
			that = this
			that.getList()
			that.getClassify()
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		onPageScroll(e) {
			if(e.scrollTop > 520){
				that.showTop = true
			}else{
				that.showTop = false
			}
		},
		onReachBottom() {
			if(!that.more) return;
			that.page++;
			that.getList()
			
		},
		methods:{
			EditIt(goods_id,index,type){
				uni.showModal({
				    title: type=='on'?'是否确定上架该商品？':'是否确定下架该商品？',
				    content: type=='on'?'确定后商品将出现在“上架中”列表':'确定后商品将出现在“已下架”列表',
					confirmText: type=='on'?'上架':'下架',
					cancelColor:"#999999",
					confirmColor: "#FF784A",
				    success: function (res) {
				        if (res.confirm) {
				           that.$http.post({
				           	url: '/singleSaleManageApi/goodsEdit',
				           	data:{
				           		shop_id: uni.getStorageSync('store_id'),
				           		goods_id: goods_id,
				           		type: type
				           	}
				           }).then(res => {
				           	if(res.code == 200){
				           		that.list.splice(index,1)
								if(!that.list || that.list.length < 1){
									that.noData = true
								}
				           	}else{
				           		uni.showToast({
				           			title: res.msg,
				           			icon: 'none'
				           		})
				           	}
				           }) 
				        }
				    }
				})
			},
			change(i,state){
				that.current = i
				that.page = 1
				that.list = []
				that.state = state
				that.getList()
			},
			getClassify(){
				that.$http.get({
					url: '/singleSaleManageApi/getClassify',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						
					}
				}).then(res => {
					if(res.data){
						that.classfy = res.data
					}
					if(res.level == 2){
						that.pickerValueDefault = [0,0]
					}
					if(res.level == 3){
						that.pickerValueDefault = [0,0,0]
					}
				})
			},
			getList(){
				that.noData = false
				
				that.showDiLine = false
				that.$http.get({
					url: '/singleSaleManageApi/goodsList',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						state: that.state,
						limit: that.limit,
						page: that.page,
						stock_sort: that.current==1?'1':'',
						classify: that.classify_id
					}
				}).then(res => {
					if(res.code != '200') return this.$Toast(res.msg);
					const result = res.data || [];
					that.count = res.count
					this.page == 1?this.list = result:this.list = this.list.concat(result);
					if(result.length < this.limit) this.more = false;
					// if(res.data){
					// 	that.list = that.list.concat(res.data)
					// 	if(res.data.length >= that.limit){
					// 		that.more = true
					// 		that.page ++
					// 	}
					// }
					
					// if(that.list.length >= that.limit && !that.more){
					// 	that.showDiLine = true
					// }
					// if(!that.list || that.list.length < 1){
					// 	that.noData = true
					// }
				})
			},
			openLevel() {
				that.$refs.levelLinkage.open();
			},
			onConfirm(e) {
				that.pickerText = ''
				that.classify_id = ''
				if(e.firstPick.classify_id != 0){
					that.pickerText = "> "+ e.firstPick.classify_name
					that.classify_id = e.firstPick.classify_id
				}
				if(e.secondPick.classify_id){
					that.pickerText += " > "+ e.secondPick.classify_name
					that.classify_id = e.secondPick.classify_id
				}
				if(e.thirdPick.classify_id){
					that.pickerText += "> "+ e.thirdPick.classify_name
					that.classify_id = e.thirdPick.classify_id
				}
				that.page = 1
				that.list = []
				that.getList()
			},
			toEditPage(goods_id){
				this.toUrl(`/pages/addProduct/addProduct?goods_id=${goods_id}`)
			}
		}
	}
</script>

<style lang="scss">
.page{
	background-color: #FFFFFF;
	padding-top: 150rpx;
	.top-box{
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 33;
		.classfy{
			height: 80rpx;
			padding:  0 $page-space;
			border-bottom: 1px solid #f5f5f5;
			view{
				text{
					margin-right: 8rpx;
				}
			}
			.icon-search{
				font-size: 36rpx;
			}
		}
		.tabs{
			height: 80rpx;
			line-height: 80rpx;
			view{
				flex: 1;
				text-align: center;
				color: #0F1826;
				font-size: 28rpx;
			}
			position: relative;
			.tag{
				position: absolute;
				bottom: -1px;
				height: 4rpx;
				border-radius: 4rpx;
				width: 80rpx;
				background-color: $uni-color-primary;
				left: 25%;
				margin-left: -40rpx;
				transition: all .2s;
			}
			.active{
				font-size: $font-size-lg;
				font-weight: 700;
				color: $uni-color-primary;
			}
		}
	}

	.list{
		padding: $page-space;
		.item{
			margin-bottom: $page-space;
			.goods-img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				text{
					background-color: #F6B081;
					padding: 2rpx 6rpx;
					color: white;
					position: absolute;
					left: 0;
					bottom: 0;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
			}
			.cloumn{
				width: calc(100% - 200rpx);
			}
			.name{
				font-size: 26rpx;
				font-weight: bold;
			}
			.info{
				color: #999999;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
			.myPrice{
				color: #DB3801;
				font-size: 34rpx;
				font-weight: bold;
			}
			.price-mini{
				color: #DB3801;
				font-weight: bold;
			}
			.up{
				width: 100rpx;
				height: 48rpx;
				line-height: 48rpx;
				background-color: $uni-color-primary;
				color: white;
				text-align: center;
				border-radius: 50rpx;
				font-size: 28rpx;
				margin-left:20rpx;
			}
			
		}
	}
}


</style>
